
<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>生产管理</el-breadcrumb-item>
    <el-breadcrumb-item>工序设置</el-breadcrumb-item>
  </el-breadcrumb>
  <el-row style="margin-top: 10px">
    <el-col :span="25">
      <el-form :model="processQuery" inline>
        <el-form-item label="工序编码">

          <el-input  v-model="processQuery.processId"/>
        </el-form-item>
        <el-form-item label="工序名称">
          <el-input v-model="processQuery.processName"/>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-select placeholder="全部" style="width:100px" v-model="processQuery.processStatus">
            <el-option :value="0" label="未启用"/>
            <el-option :value="1" label="启用"/>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="loadProcesses">搜索</el-button>
          <el-button @click="back">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <!-- 工具栏 -->
  <el-row style="margin-top: 10px">
    <el-col :span="24">
      <el-button type="primary" plain @click="toAdd"><el-icon><Plus /></el-icon>新增</el-button>
      <el-button type="success" plain @click="allPublish"><el-icon><EditPen /></el-icon>修改</el-button>
      <el-button type="danger" plain @click="allDelete"><el-icon><Delete /></el-icon>删除</el-button>
      <el-button type="warning" plain @click="allPigeonhole"><el-icon><Download /></el-icon>导出</el-button>
    </el-col>
  </el-row>

  <!-- 数据表 -->
  <el-row style="margin-top: 10px">
    <el-col :span="24">
      <el-table
          :data="processes"
          border
          :stripe="true"
          ref="processTable"
      >
        <el-table-column type="selection" width="55" />

          <el-table-column prop="processId" label="工序编码" >
            <template #default="scope">
              <el-link type="primary" @click="toDetail(scope.row.processRelId)">{{ scope.row.processId }}</el-link>
        </template>
        </el-table-column>


        <el-table-column prop="processName" label="工序名"/>

        <el-table-column prop="projectStatus" label="是否启用">
          <template #default="scope">
            <el-tag type="info" v-if="scope.row.processStatus == 0">未启用</el-tag>
            <el-tag type="primary" v-else-if="scope.row.processStatus == 1">启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="processDescription" label="备注"/>

        <el-table-column label="操作" width="330">
          <template #default="scope">
            <el-button-group>
              <template v-if="scope.row.userId == curId">
                <el-button size="small" type="primary" @click="toPrimaryProcess(scope.row.processRelId)">修改</el-button>
                <el-popconfirm title="你确定要删除吗" @confirm="deleteProcess(scope.row.processRelId)" >
                  <template #reference>
                    <el-button size="small" type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-pagination @change="changePage" background layout="prev, pager, next" :total="total"/>
    </el-col>
  </el-row>


  <!-- 新增工序弹窗 -->
  <el-dialog
      v-model="processAddWinDialogVisible"
      title="新增工序"
      width="500"
  >
    <el-form v-model="addProcess" label-width="auto">
      <el-form-item  label="工序编码">
        <el-input v-model="addProcess.processId" />
        <el-switch v-model="value1"  active-text="自动生产" :change="getRandom()"/>
      </el-form-item>
      <el-form-item  label="工序名称">
        <el-input  v-model="addProcess.processName" />
      </el-form-item>
      <el-form-item  label="是否启用">

        <el-radio-group v-model="addProcess.processStatus">
          <el-radio value="0" size="large">是</el-radio>
          <el-radio value="1" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item  label="工序详情">
        <el-input type="textarea" v-model="addProcess.processDescription" />
      </el-form-item>
      <el-form-item  label="工序备注">
        <el-input type="textarea" v-model="addProcess.processRemark" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addSubmit">提交</el-button>
        <el-button type="info" @click="cancelProcess">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>


  <!-- 修改工序弹窗 -->
  <el-dialog
      v-model="processModifyWinDialogVisible"
      title="修改工序"
      width="600"
  >
    <el-form v-model="editProcess" label-width="auto">
      <el-form-item  label="工序编码">
        <el-input v-model="editProcess.processId" />
        <el-switch v-model="value1"  active-text="自动生产" :change="getRandom()"/>
      </el-form-item>
      <el-form-item  label="工序名称">
        <el-input  v-model="editProcess.processName" />
      </el-form-item>
      <el-form-item  label="是否启用">

        <el-radio-group v-model="editProcess.processStatus">
          <el-radio value="0" size="large">否</el-radio>
          <el-radio value="1" size="large">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item  label="工序详情">
        <el-input type="textarea" v-model="editProcess.processDescription" />
      </el-form-item>
      <el-form-item  label="工序备注">
        <el-input type="textarea" v-model="editProcess.processRemark" />
      </el-form-item>



    </el-form>
    <span style="align-content: center">-----------------------------------------操作步骤---------------------------------------</span>
    <!-- 工具栏 -->
    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-button type="primary" plain @click="toAddOperate"><el-icon><Plus /></el-icon>新增</el-button>
        <el-button type="success" plain @click="allPublish"><el-icon><EditPen /></el-icon>修改</el-button>
        <el-button type="danger" plain @click="deleteChooseOperate"><el-icon><Delete /></el-icon>删除</el-button>
        <el-button type="warning" plain @click="exportOperate"><el-icon><Download /></el-icon>导出</el-button>
      </el-col>
    </el-row>
    <!-- 操作步骤数据表 -->
    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-table
            :data="operate"
            border
            :stripe="true"
            ref="operationTable"
        >
          <el-table-column type="selection" width="55" />

          <el-table-column prop="operateId" label="顺序编号" >
            <template #default="scope">
              <el-link type="primary" >{{ scope.row.operateId }}</el-link>
            </template>
          </el-table-column>


          <el-table-column prop="operateExplain" label="步骤说明"/>

          <el-table-column prop="operateEquipmentAncillary" label="辅助设备"/>
          <el-table-column prop="operateMaterialsAncillary" label="辅助材料"/>
          <el-table-column prop="operateRemark" label="备注"/>

          <el-table-column label="操作" width="330">
            <template #default="scope">
              <el-button-group>
                <template v-if="scope.row.userId == curId">
                  <el-button size="small" type="primary" @click="toPrimaryOperate(scope.row.operateRelId)">修改</el-button>
                  <el-popconfirm title="你确定要删除吗" @confirm="deleteOperate(scope.row.operateRelId)" >
                    <template #reference>
                      <el-button size="small" type="danger">删除</el-button>
                    </template>
                  </el-popconfirm>
                </template>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row style="margin: 0px 10px;padding: 0px 15px">
      <el-col :span="24">
        <el-pagination @change="changePage" background layout="prev, pager, next" :total="total"/>
      </el-col>
    </el-row>
    <el-row style="margin: 0px 10px;padding: 0px 15px ;">
      <el-col :span="16" >

      </el-col>
      <el-col :span="8" >
        <el-button type="primary" @click="editSubmit">提交</el-button>
        <el-button type="info" @click="canceledit">取消</el-button>
      </el-col>
    </el-row>

  </el-dialog>

  <!-- 查看弹窗 -->
  <el-dialog
      v-model="processDetailWinDialogVisible"
      title="修改工序"
      width="600"
  >
    <el-form v-model="editProcess" label-width="auto">
      <el-form-item  label="工序编码">
        <el-input v-model="editProcess.processId" />
        <el-switch v-model="value1"  active-text="自动生产" :change="getRandom()"/>
      </el-form-item>
      <el-form-item  label="工序名称">
        <el-input  v-model="editProcess.processName" />
      </el-form-item>
      <el-form-item  label="是否启用">

        <el-radio-group v-model="editProcess.processStatus">
          <el-radio value="0" size="large">否</el-radio>
          <el-radio value="1" size="large">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item  label="工序详情">
        <el-input type="textarea" v-model="editProcess.processDescription" />
      </el-form-item>
      <el-form-item  label="工序备注">
        <el-input type="textarea" v-model="editProcess.processRemark" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="cancelDetail">返回</el-button>
        <el-button type="info" @click="cancelDetail">取消</el-button>
      </el-form-item>
    </el-form>

    <span style="align-content: center">---------------------------操作步骤----------------------------------</span>
    <!-- 工具栏 -->
    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-button type="primary" plain @click="toAddOperate"><el-icon><Plus /></el-icon>新增</el-button>
        <el-button type="success" plain @click="allPublish"><el-icon><EditPen /></el-icon>修改</el-button>
        <el-button type="danger" plain @click="allDelete"><el-icon><Delete /></el-icon>删除</el-button>
        <el-button type="warning" plain @click="exportOperate"><el-icon><Download /></el-icon>导出</el-button>
      </el-col>
    </el-row>
    <!-- 操作步骤数据表 -->
    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-table
            :data="operate"
            border
            :stripe="true"
            ref="operationTable"
        >
          <el-table-column type="selection" width="55" />

          <el-table-column prop="operateId" label="顺序编号" >
            <template #default="scope">
              <el-link type="primary" >{{ scope.row.operateId }}</el-link>
            </template>
          </el-table-column>


          <el-table-column prop="operateExplain" label="步骤说明"/>

          <el-table-column prop="operateEquipmentAncillary" label="辅助设备"/>
          <el-table-column prop="operateMaterialsAncillary" label="辅助材料"/>
          <el-table-column prop="operateRemark" label="备注"/>
        </el-table>
      </el-col>
    </el-row>
    <el-row style="margin: 0px 10px;padding: 0px 15px">
      <el-col :span="24">
        <el-pagination @change="changePage" background layout="prev, pager, next" :total="total"/>
      </el-col>
    </el-row>
  </el-dialog>


  <!--新增操作步骤 -->
  <el-dialog
      v-model="operateAddWinDialogVisible"
      title="添加操作步骤"
      width="500"
  >
    <el-form v-model="addOperate" label-width="auto">
      <el-form-item  label="顺序编号">
        <el-input-number v-model="addOperate.operateId" :min="1" :max="10" @change="handleChange" />
      </el-form-item>
      <el-form-item  label="材料URL">
        <el-input  v-model="addOperate.operateMaterialsURL" />
      </el-form-item>
      <el-form-item  label="辅助设备">
        <el-input  v-model="addOperate.operateEquipmentAncillary" />
      </el-form-item>
      <el-form-item  label="辅助材料">
        <el-input  v-model="addOperate.operateMaterialsAncillary" />
      </el-form-item>
      <el-form-item  label="步骤说明">
        <el-input type="textarea" v-model="addOperate.operateExplain" />
      </el-form-item>
      <el-form-item  label="备注">
        <el-input type="textarea" v-model="addOperate.operateRemark" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addOperateSubmit">确定</el-button>
        <el-button type="info" @click="cancelOperateProcess">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!--修改操作步骤 -->
  <el-dialog
      v-model="operatePrimaryWinDialogVisible"
      title="修改操作步骤"
      width="500"
  >
    <el-form v-model="addOperate" label-width="auto">
      <el-form-item  label="顺序编号">
        <el-input-number v-model="addOperate.operateId" :min="1" :max="10" @change="handleChange" />
      </el-form-item>
      <el-form-item  label="材料URL">
        <el-input  v-model="addOperate.operateMaterialsURL" />
      </el-form-item>
      <el-form-item  label="辅助设备">
        <el-input  v-model="addOperate.operateEquipmentAncillary" />
      </el-form-item>
      <el-form-item  label="辅助材料">
        <el-input  v-model="addOperate.operateMaterialsAncillary" />
      </el-form-item>
      <el-form-item  label="步骤说明">
        <el-input type="textarea" v-model="addOperate.operateExplain" />
      </el-form-item>
      <el-form-item  label="备注">
        <el-input type="textarea" v-model="addOperate.operateRemark" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="primaryOperateSubmit">确定</el-button>
        <el-button type="info" @click="cancelOperatePrimary">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>


<script setup>
import {onMounted, ref} from "vue";
import produceRequest from "@/api/produce.js";
import {ElMessage, ElMessageBox} from "element-plus";
let operateAddWinDialogVisible = ref(false);
let operatePrimaryWinDialogVisible = ref(false);
let operationTable =ref([]);
let addOperate = ref({});
let curPage = ref(1);
// 总条数，默认0
let total = ref(0);
let processAddWinDialogVisible =ref(false);
let processQuery = ref({});
//存放选择数据
let processTable = ref([]);
//新增工序
let addProcess =ref({});
let processes = ref([]);
let value1 = ref();
let editProcess = ref({})
let processDetailWinDialogVisible =ref(false);
let processModifyWinDialogVisible = ref(false);
//导出工序步骤
function exportOperate(){
   produceRequest.exportOperate(editProcess.value.processRelId,1,10);
}
//批量删除工序步骤
function deleteChooseOperate(){
  let selectedRows = operationTable.value.getSelectionRows();
  console.log(selectedRows)

  ElMessageBox.confirm(
      '您确定要将选中的项目删除吗？',
      '提示',
      {
        confirmButtonText: '是的',
        cancelButtonText: '点错了',
        type: 'warning',
      }
  ).then(()=>{
    produceRequest.deleteChooseOperate(selectedRows,res=>{
      if (res.code=="200"){
        ElMessage({
          type:"success",
          message:"成功删除"
        })

        toPrimaryProcess(editProcess.value.processRelId);
      }else {
        ElMessage({
          type:"error",
          message:"数据错误"
        })

      }

    })
  })

}
//删除单个工序步骤
function deleteOperate(id){
  produceRequest.deleteOneOperate(id,res=>{
    if (res.code=="200"){
      ElMessage({
        type:"success",
        message:"删除成功"
      })
      toPrimaryProcess(editProcess.value.processRelId);


    }else {
      ElMessage({
        type:"error",
        message:"删除失败"
      })

    }

  })
}
//确认修改
function primaryOperateSubmit(){
  produceRequest.primaryOperate(addOperate.value,res=>{
    if (res.code=="200"){
      ElMessage({
        type:"success",
        message:"修改成功"
      })
      toPrimaryProcess(addOperate.value.operateProcessRelId);
      operatePrimaryWinDialogVisible.value = false;

    }else {
      ElMessage({
        type:"error",
        message:"数据错误"
      })

    }
  })
}

//取消修改工序步骤
function cancelOperatePrimary(){
  operatePrimaryWinDialogVisible.value = false;
  addOperate =ref({})

}
//修改的按键
function toPrimaryOperate(operateRelId){
   produceRequest.getPrimaryOperate(operateRelId,res=>{
     addOperate.value = res.data;
     operatePrimaryWinDialogVisible.value = true;

   })

}
//取消新增操作步骤
function cancelOperateProcess(){

  operateAddWinDialogVisible.value = false;
}

//确认新增操作步骤
function addOperateSubmit(){
  addOperate.value.operateProcessRelId = editProcess.value.processRelId;
  console.log(addOperate.value);
  produceRequest.addOperate(addOperate.value,res=>{
    if (res.code=="200"){
      ElMessage({
        type:"success",
        message:"添加成功"
      })
      toPrimaryProcess(addOperate.value.operateProcessRelId);
      operateAddWinDialogVisible.value = false;

    }else {
      ElMessage({
        type:"error",
        message:"数据错误"
      })

    }
  })
}


//新增操作步骤
function toAddOperate(){
  operateAddWinDialogVisible.value=true;

}

//存放操作步骤
let operate = ref([])
//批量删除
function allDelete(){
  let selectedRows = processTable.value.getSelectionRows();

  ElMessageBox.confirm(
      '您确定要将选中的项目删除吗？',
      '提示',
      {
        confirmButtonText: '是的',
        cancelButtonText: '点错了',
        type: 'warning',
      }
  ).then(()=>{
    produceRequest.deleteAllProcess(selectedRows,res=>{
      if (res.code=="200"){
        ElMessage({
          type:"success",
          message:"成功删除"
        })

        loadProcesses();
      }else {
        ElMessage({
          type:"error",
          message:"数据错误"
        })

      }

    })
  })

}
//删除确认
function deleteProcess(relId){
  produceRequest.deleteProcess(relId,res=>{
    if (res.code=="200"){
      ElMessage({
        type:"success",
        message:"成功删除"
      })

      loadProcesses();
    }else {
      ElMessage({
        type:"error",
        message:"数据错误"
      })

    }
  })

}
function cancelDetail(){
  processDetailWinDialogVisible.value=false;
  editProcess.value="";
}
function toDetail(id){

  produceRequest.getModify(id,res=>{
    editProcess.value = res.data;
  })
  produceRequest.getOperate(id,1,10,res=>{
    operate.value = res.data.list;

  })
  processDetailWinDialogVisible.value=true;
}
//确认修改
function editSubmit(){
  console.log(editProcess.value)
  produceRequest.putModify(editProcess.value,res=>{
    if (res.code=="200"){
      ElMessage({
        type:"success",
        message:"成功修改"
      })
      processModifyWinDialogVisible.value = false;
      loadProcesses();
    }else {
      ElMessage({
        type:"error",
        message:"数据错误"
      })

    }

  })
  processModifyWinDialogVisible.value = false;

}

//取消修改
function canceledit(){
  processModifyWinDialogVisible.value = false;
  editProcess.value = "";
}
//修改按钮
function toPrimaryProcess(processRelId){

  editProcess.value = "";
  produceRequest.getModify(processRelId,res=>{
    editProcess.value = res.data;
  })

  produceRequest.getOperate(processRelId,1,10,res=>{
    operate.value = res.data.list;

  })
  processModifyWinDialogVisible.value = true;
}
function getRandom(){
  if (value1.value==true){
    produceRequest.getRandom(res=>{
      addProcess.value.processId = res.data;
    })
  }else {
    addProcess.value.processId = "";
  }
}

function addSubmit(){

  console.log(addProcess)
  produceRequest.addProcess(addProcess.value,res=>{
    console.log(res)
    if (res.code=="200"){
      ElMessage({
        type:"success",
        message:"成功增加"
      })
      processAddWinDialogVisible.value = false;
      loadProcesses();
    }else {
      ElMessage({
        type:"error",
        message:"数据错误"
      })

    }
  })
}
function cancelProcess(){
  processAddWinDialogVisible.value = false;
  addProcess.value = {}
}
function toAdd(){
  processAddWinDialogVisible.value = true;
}
function changePage(value) {
  curPage.value = value;
  loadProcesses();
}
function loadProcesses(){
  console.log(processQuery.value)
  produceRequest.getProcess(processQuery.value,curPage.value,10,res=>{

    total.value = res.data.total;
    // 将查询的列表赋值给projects
    processes.value = res.data.list;
    console.log(res)
  })
}
onMounted(()=>{
loadProcesses();
})
</script>
<style scoped>

</style>
